@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'white': #ffffff,
    'black': #222222,
    /* 'primary': (
      'base': #6842FD,
    ),
    'success': (
      'base': rgb(115,200,25),
    ),
    'warning': (
      'base': #ff8800,
    ),
    'danger': (
      'base': rgba(255,70,70,1),
    ),
    'error': (
      'base': rgba(255, 78, 78, 1),
    ),
    'info': (
      'base': #a0a0ce,
    ), */
  ),
);

@use "element-plus/theme-chalk/src/index.scss" as *;

/* el-menu */
.el-menu {
  --el-menu-text-color: #fff;
  --el-menu-active-color: var(--primary-color);
  --el-menu-hover-bg-color: none;
  --el-menu-item-font-size: 28px;

  background: none;
  border-right: none;

  .el-menu-item-group__title {
    padding: 0;
  }

  .el-sub-menu {
    &.is-opened {
      --el-menu-text-color: var(--primary-color);
    }

    .el-icon {
      font-size: 28px;
    }
  }

  .el-sub-menu .el-sub-menu {
    --el-menu-item-font-size: 24px;
  }

  .el-sub-menu .el-sub-menu .el-menu {
    --el-menu-item-font-size: 22px;
    --el-menu-text-color: #dedede;

    span {
      margin-left: -0.9em;
    }

    .el-menu-item {
      border-radius: 6px;
    }

    .el-menu-item.is-active {
      color: #161930;
      background: var(--primary-color);
    }
  }
}

/* .el-message-box */
.el-message-box {
  --el-bg-color: var(--panel-color);
  --el-border-color-lighter: var(--panel-color);
  --el-messagebox-title-color: #fff;
  --el-color-info: #fff;
  --el-messagebox-content-color: #fff;

  border-radius: 0;

  .el-button.el-button--primary {
    --el-color-primary: var(--primary-color);
    color: #213654;
    border-radius: 0;
  }
}

/* .el-notification--edge */
.el-notification--edge {
  border-radius: 0;
  border: none;
  background: #fff;
  padding: 10px 16px;

  &.el-notification--error {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: #ff4e4e;
    }
  }

  &.el-notification--info {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--primary-color);
    }
  }

  .el-notification__content {
    color: #161930;
    font-weight: bold;
  }

  .el-notification__closeBtn {
    top: 50%;
    transform: translateY(-50%);
    color: #161930;
  }
}
